<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import { useWatch } from "./hook";

import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
// import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import ViewIco from "@iconify-icons/ep/view";
import EnableIco from "@iconify-icons/ep/check";

defineOptions({
  name: "ScheduleList"
});

const {
  tableRef,
  ruleFormRef,
  columns,
  onSearch,
  searchform,
  tabledata,
  getPageData,
  handleUpdate,
  handleDelete,
  handleSelectionChange,
  handleBatchDelete,
  handleBatchEnable,
  cmpglobal,
  dialogtitle,
  addorupdataform,
  resetSearchForm,
  resetAddOrUpdataForm,
  rules,
  submitForm,
  pagination,
  onSizeChange,
  onCurrentChange,
  clickSearch,
  handleView,
  dialogClose,
  handleEnable,
  ifDisabledForm,
  ifDisabledFormResetBut,
  dialogOpen,
  tree,
  classifyTreeCheckChange,
  searchClassifyTreeCheckChange,
  getClassifyTreeData,
  searchtree,
  showMouseMenu
} = useWatch();

getPageData();
//获取分类Tree组件框数据
getClassifyTreeData();
</script>

<template>
  <div class="main">
    <el-form
      :model="searchform"
      :inline="true"
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="赛程时间">
        <el-date-picker
          v-model="searchform.starttime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="赛程所属分类">
        <el-tree-select
          ref="searchtree"
          node-key="id"
          :data="cmpglobal.classifyTreeData"
          :render-after-expand="false"
          show-checkbox
          @check-change="searchClassifyTreeCheckChange"
          v-model="searchform.classifytree"
        />
      </el-form-item>
      <el-form-item label="备注">
        <el-input placeholder="请输入备注" v-model="searchform.remark" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          placeholder="请选择状态"
          clearable
          v-model="searchform.ifdisable"
        >
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
          <el-option label="全部" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          @click="clickSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetSearchForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <PureTableBar
      :title="cmpglobal.tableTitle"
      @refresh="onSearch"
      :tableRef="tableRef?.getTableRef()"
    >
      <template #buttons>
        <el-popconfirm title="是否确认禁用?" @confirm="handleBatchDelete">
          <template #reference>
            <el-button type="primary" :icon="useRenderIcon(Delete)">
              批量禁用
            </el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm title="是否确认启用?" @confirm="handleBatchEnable">
          <template #reference>
            <el-button type="primary" :icon="useRenderIcon(EnableIco)">
              批量启用
            </el-button>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table
          :data="tabledata.data"
          :columns="columns"
          border
          :checkList="checkList"
          :size="size"
          row-key="id"
          @selection-change="handleSelectionChange"
          ref="tableRef"
          :pagination="pagination"
          @page-size-change="onSizeChange"
          @page-current-change="onCurrentChange"
          @row-contextmenu="showMouseMenu"
          ><template #operation="{ row }">
            <span v-show="row.datatype === 'match' ? true : false">
              <el-button
                class="reset-margin"
                link
                type="info"
                :size="size"
                @click="handleView(row)"
                :icon="useRenderIcon(ViewIco)"
              >
                查看
              </el-button>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="handleUpdate(row)"
                :icon="useRenderIcon(EditPen)"
              >
                修改
              </el-button>
              <span v-show="row.ifdisable === 1 ? true : false">
                <el-popconfirm
                  title="是否确认禁用?"
                  @confirm="handleDelete(row)"
                >
                  <template #reference>
                    <el-button
                      class="reset-margin"
                      link
                      type="primary"
                      :size="size"
                      :icon="useRenderIcon(Delete)"
                    >
                      禁用
                    </el-button>
                  </template>
                </el-popconfirm>
              </span>
              <span v-show="row.ifdisable === 0 ? true : false"
                ><el-popconfirm
                  title="是否确认启用?"
                  @confirm="handleEnable(row)"
                >
                  <template #reference>
                    <el-button
                      class="reset-margin"
                      link
                      type="primary"
                      :size="size"
                      :icon="useRenderIcon(EnableIco)"
                    >
                      启用
                    </el-button>
                  </template>
                </el-popconfirm></span
              >
            </span>
          </template></pure-table
        ></template
      >
    </PureTableBar>
    <el-dialog
      v-model="cmpglobal.dialogVisible"
      :title="dialogtitle"
      width="50%"
      @close="dialogClose"
      @open="dialogOpen"
    >
      <el-form
        :model="addorupdataform"
        label-width="120px"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="比赛分类" prop="classifytree">
          <el-col :span="8">
            <el-tree-select
              ref="tree"
              node-key="id"
              :data="cmpglobal.classifyTreeData"
              :render-after-expand="false"
              show-checkbox
              @check-change="classifyTreeCheckChange"
              v-model="addorupdataform.classifytree"
              :disabled="true"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="赛程" prop="schedulename">
          <el-col :span="8">
            <el-input
              placeholder="请输入赛程"
              v-model="addorupdataform.schedulename"
              :disabled="true"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="比赛时间" prop="starttimehour">
          <el-col :span="8">
            <el-time-picker
              v-model="addorupdataform.starttimehour"
              placeholder="请输入比赛时间"
              format="HH:mm"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="观看平台" prop="watchid">
          <el-col :span="8">
            <el-select
              v-model="addorupdataform.watchid"
              filterable
              placeholder="请选择观看平台"
              :disabled="ifDisabledForm"
            >
              <el-option
                v-for="item in cmpglobal.watchSelectData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="队伍一" prop="teamaid">
          <el-col :span="8">
            <el-select
              v-model="addorupdataform.teamaid"
              filterable
              placeholder="请选择队伍一"
              :disabled="ifDisabledForm"
            >
              <el-option
                v-for="item in cmpglobal.teamSelectData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="队伍一比分" prop="teamascore">
          <el-col :span="8">
            <el-input-number
              v-model="addorupdataform.teamascore"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="队伍二" prop="teambid">
          <el-col :span="8">
            <el-select
              v-model="addorupdataform.teambid"
              filterable
              placeholder="请选择队伍二"
              :disabled="ifDisabledForm"
            >
              <el-option
                v-for="item in cmpglobal.teamSelectData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="队伍二比分" prop="teambscore">
          <el-col :span="8">
            <el-input-number
              v-model="addorupdataform.teambscore"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="备注">
          <el-col :span="8">
            <el-input
              placeholder="请输入赛程备注"
              v-model="addorupdataform.remark"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            :disabled="ifDisabledForm"
            >保存</el-button
          >
          <el-button
            type="primary"
            @click="resetAddOrUpdataForm()"
            :disabled="ifDisabledFormResetBut"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cmpglobal.dialogVisible = false"
            >关闭对话框</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
